<script setup lang="ts">
import * as echarts from 'echarts'
import { vw, vh } from '@/utils/viewSize'
import type { propType } from '@/components/radar/type'
import Radar from '../radar/index.vue'
import { ref, onMounted } from 'vue'
import { Bottom } from '@element-plus/icons-vue'
const chartdom = ref()
const data1: propType = {
  title: '股市',
  color: ['#0DE4EE', '#0D88F3'],
  data: [
    { name: '数据1', value: [45, 35, 12, 65, 23], color: '#0DE4EE' },
    { name: '数据2', value: [98, 11, 74, 45, 32], color: '#B405FD' },
    { name: '数据3', value: [81, 73, 52, 36, 32], color: '#FE9900' }
  ]
}
const data2 = [
  [96.24, 11.35],
  [33.09, 85.11],
  [57.6, 36.61],
  [36.77, 27.26],
  [20.1, 6.72],
  [45.53, 36.37],
  [110.07, 80.13],
  [72.05, 20.88],
  [39.82, 37.15],
  [48.05, 70.5],
  [0.85, 2.57],
  [51.66, 63.7],
  [61.07, 127.13],
  [64.54, 33.59],
  [35.5, 25.01],
  [226.55, 664.02],
  [188.6, 175.31],
  [81.31, 108.68]
]
const initChart = () => {
  var myChart = echarts.init(chartdom.value)
  myChart.setOption({
    xAxis: {
      axisTick: { show: false },
      axisLabel: {
        show: true,
        color: '#4a9ee8',
        fontSize: vw(10)
      },
      axisLine: {
        lineStyle: {
          color: '#4a9ee8'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#4a9ee8'
        }
      }
    },
    yAxis: {
      scale: true,
      //刻度
      axisTick: { show: false },
      // 刻度标签
      axisLabel: {
        color: '#4a9ee8',
        fontSize: vw(10)
      },
      //坐标轴线
      axisLine: {
        lineStyle: {
          color: '#4a9ee8'
        }
      },
      //分割线
      splitLine: {
        lineStyle: {
          color: '#4a9ee8'
        }
      }
    },
    grid: {
      top: 5,
      bottom: 20,
      containLabel: true
    },
    series: [
      {
        type: 'effectScatter',
        symbolSize: 10,
        z: 10,
        itemStyle: {
          color: '#FF1200'
        },
        data: [
          [72.7, 65.2],
          [153.4, 42]
        ]
      },
      {
        symbolSize: 10,
        itemStyle: {
          color: '#0E4CFF'
        },
        data: [
          [162.8, 58.0],
          [167.0, 59.8],
          [60.0, 54.8],
          [160.0, 43.2],
          [168.9, 60.5],
          [158.2, 46.4],
          [156.0, 64.4],
          [160.0, 48.8],
          [67.1, 62.2],
          [158.0, 55.5],
          [122.6, 57.8],
          [26.0, 54.6],
          [162.1, 59.2],
          [133.4, 52.7],
          [59.8, 53.2],
          [70.5, 64.5],
          [159.2, 51.8],
          [57.5, 56.0],
          [61.3, 63.6],
          [132.6, 63.2],
          [60.0, 59.5],
          [168.9, 56.8],
          [65.1, 64.1],
          [132.6, 50.0],
          [165.1, 72.3],
          [66.4, 55.0],
          [60.0, 55.9],
          [52.4, 60.4],
          [140.2, 69.1],
          [12.6, 84.5],
          [70.2, 55.9],
          [158.8, 55.5],
          [112.7, 69.5],
          [67.6, 76.4],
          [162.6, 61.4],
          [87.6, 65.9],
          [56.2, 58.6],
          [175.2, 66.8],
          [72.1, 56.6],
          [162.6, 58.6],
          [90.0, 55.9],
          [165.1, 59.1],
          [102.9, 81.8],
          [66.4, 70.7],
          [125.1, 56.8],
          [102.7, 75.9],
          [167.6, 55.0],
          [65.1, 65.5],
          [157.5, 48.6],
          [63.8, 58.6],
          [67.6, 63.6],
          [65.1, 55.2]
        ],
        type: 'scatter'
      },
      {
        type: 'scatter',
        itemStyle: {
          color: '#2E62F9'
        },
        data: [
          [161.2, 2.6],
          [127.5, 59.0],
          [159.5, 49.2],
          [17.0, 63.0],
          [155.8, 53.6],
          [170.0, 59.0],
          [19.1, 47.6],
          [166.0, 69.8],
          [116.2, 66.8],
          [160.2, 75.2],
          [172.5, 55.2],
          [110.9, 54.2],
          [12.9, 62.5],
          [153.4, 42.0],
          [110.0, 50.0],
          [10.2, 49.8],
          [88.2, 49.2],
          [175.0, 73.2],
          [157.0, 47.8],
          [67.6, 68.8],
          [159.5, 50.6],
          [175.0, 82.5],
          [86.8, 57.2],
          [96.5, 87.8],
          [90.2, 72.8],
          [174.0, 54.5],
          [173.0, 59.8],
          [179.9, 67.3],
          [110.5, 67.8],
          [60.0, 47.0],
          [154.4, 46.2],
          [82.0, 55.0],
          [86.5, 83.0],
          [10.0, 54.4],
          [52.0, 45.8],
          [162.1, 53.6],
          [170.0, 73.2],
          [60.2, 52.1],
          [121.3, 67.9],
          [116.4, 56.6]
        ]
      }
    ]
  })
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
onMounted(() => {
  initChart()
})
</script>

<template>
  <div class="container">
    <div class="radar-box">
      <div class="radar-item"><Radar :data="data1.data" :color="data1.color"></Radar></div>
      <div class="radar-item"><Radar></Radar></div>
      <div class="radar-item"><Radar></Radar></div>
      <div class="radar-item"><Radar></Radar></div>
    </div>
    <div class="sandian-box" ref="chartdom"></div>
  </div>
</template>
<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
}
.radar-box {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: space-between;
  .radar-item {
    flex: 1;
    // width: 100%;
    // height: 100%;
  }
}
.sandian-box {
  width: 100%;
  height: 50%;
}
</style>
